<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
    <h2>{{product}}</h2>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            product: 'apple'
        },
        beforeCreate:function(){
            console.log('Vue生命周期第1阶段：beforeCreate');
        },
        created:function(){
            console.log('Vue生命周期第2阶段：created');
        },
        mounted:function(){
            console.log('Vue生命周期第3阶段：mounted');
        },
        beforeUpdate:function(){
            console.log('Vue生命周期第4阶段：beforeUpdate');
        },
        updated:function(){
            console.log('Vue生命周期第5阶段：updated');
        },

        activated:function(){
            console.log('Vue生命周期第6阶段：activated');
        },
        deactivated:function(){
            console.log('Vue生命周期第7阶段：deactivated');
        },

        beforeDestroy:function(){
            console.log('Vue生命周期第8阶段：beforeDestroy');
        },
        destroy:function(){
            console.log('Vue生命周期第9阶段：destroy');
        },
        errorCaptured:function(){
            console.log('Vue生命周期第10阶段：errorCaptured');
        }
    });

    setTimeout(function(){
        app.product="这是3秒后变更的数据，只执行一次。hello";
    },3000);
</script>